<template>
  <div>
    <div class="main_navigator">
      <el-breadcrumb separator="/" style="font-size:18px;">
        <el-breadcrumb-item>
          <span @click="goBack">返回</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{crumbOne}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{crumbTwo}}</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span :class="active_crumb">{{crumbThree}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_content">
      <el-input
        style="width:200px;"
        clearable
        v-model="searchText"
        placeholder="请输入查询关键字"
        @keydown.enter.native="doSearch()"
      ></el-input>
      <el-button type="success" @click="doSearch()" class="added">搜索</el-button>
      <el-button style="margin-left:100px;" type="success" @click="toAdd()">新增</el-button>
      <el-button
        style="margin-left:10px;"
        type="danger"
        @click="handleMultiDelete"
        :disabled="!hasMultiDelete"
      >批量删除</el-button>
      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top:10px;"
        :header-cell-style="tableHeaderStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="date" label="日期" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="140">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          small
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="thePageSize"
          layout="total, prev, pager, next, jumper"
          :total="myTotal"
        ></el-pagination>
      </div>
    </div>
    <el-dialog v-dialogDrag ref="dialog_isDelete" title="提示" :visible.sync="isDelete" width="32%">
      <span>是否删除！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="doDelete()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: "",
      active_crumb: "active_crumb", //面包屑当前颜色
      tableHeaderStyle: {
        //表头样式
        "background-color": "rgb(242,242,242)"
      },
      crumbOne: "一级菜单",
      crumbTwo: "二级菜单",
      crumbThree: "三级菜单",
      multipleSelection: [], //多选
      theRow: {}, //当前行数据
      theIndex: 0, //当前下标
      multiIDS: [], //多选
      theAdd: {}, //新增数据
      isAdd: false, //是否新增
      isDelete: false, //是否删除
      hasMultiDelete: false, //是否多选
      searchText: "", //搜索字段
      myTotal: 1, //分页总条数，默认1
      currentPage: 1, //初始化当前页
      nowPage: 1, //当前页
      thePageSize: 15, //每页条数
      addOrEdit: "新增供应商", //新增或编辑标题
      tableData: [
        //表格数据
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        }
      ],
      rules: {
        //表单验证
        role_name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, max: 25, message: "长度在 1 到 25 个字符", trigger: "blur" }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ]
      }
    };
  },
  components: {},
  methods: {
    handleMultiDelete() {
      //调起删除弹窗
      this.isDelete = true;
    },
    handleDelete(index, row) {
      //调起删除弹窗
      this.isDelete = true;
      this.theRow = row;
      this.multiIDS.push(row.role_id);
    },
    doDelete: async function() {
      //删除方法
      var postData = {
        IDS: this.multiIDS.join()
      };
      var s = qs.stringify(postData);
      const responseData = await myhttp.post(api.deleteGoods, s);
      if (responseData.data.result == "error") {
        msgError(this, responseData.data.msg);
      } else {
        msgSuccess(this, responseData.data.msg);
        this.isDelete = false;
        this.getAllList();
      }
    },
    doAdd(formName) {
      //删除或新增
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.addOrEdit == "新增供") {
            this.addFunction(); //新增
          } else {
            this.editFunction(); //删除
          }
        } else {
          msgWarning(this, "请填写必要信息！");
          return false;
        }
      });
    },
    addFunction: async function() {
      var postData = this.theAdd;
      var s = qs.stringify(postData);
      const responseData = await myhttp.post(api.insertGoods, s);
      if (responseData.data.result == "error") {
        msgError(this, responseData.data.msg);
      } else {
        msgSuccess(this, responseData.data.msg);
        this.isAdd = false;
        this.getAllList();
      }
    },
    editFunction: async function() {
      var postData = this.theAdd;
      var s = qs.stringify(postData);
      const responseData = await myhttp.post(api.updateGoods, s);
      if (responseData.data.result == "error") {
        msgError(this, responseData.data.msg);
      } else {
        msgSuccess(this, responseData.data.msg);
        this.isAdd = false;
        this.getAllList();
      }
    },
    toAdd() {
      //调起新增弹窗
      this.addOrEdit = "新增角色";
      this.isAdd = true;
      this.theAdd = {};
    },
    handleEdit(index, row) {
      //调起编辑弹窗
      this.theAdd = row;
      this.addOrEdit = "编辑供应商";
      this.isAdd = true;
    },
    doSearch() {
      //搜索方法
      this.getAllList();
    },
    handleSelectionChange(val) {
      //处理多选
      this.multipleSelection = val;
      this.multiIDS = val.map(element => element.id);
      this.hasMultiDelete = val.length !== 0;
    },
    handleCurrentChange(val) {
      //分页查询
      this.nowPage = val;
      this.getAllList();
    },
    goBack() {
      this.$router.go(-1);
    },
    openLoading() {
      //loading请求等待
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    getAllList: async function() {
      var postData = {
        in_warehouse_id: this.inWarehouseId, //单查时传入
        pageNum: this.nowPage,
        pageSize: this.thePageSize
      };
      var s = qs.stringify(postData);
      const responseData = await myhttp.post(api.selectInDetails, s);
      this.tableData = responseData.data.items;
      this.myTotal = responseData.data.total;
      if (responseData.data.result == "error") {
        msgError(this, responseData.data.msg);
      }
    }
  },
  created() {
    this.getAllList();
  },
  mounted() {}
};
</script>
<style scoped>
.active_crumb {
  color: rgb(90, 160, 230);
}
</style>


